<template>
<div class="app">
  <div class="shell">
        <div class="container b-container" id="b-container">
                <h2 class="form_title title1">登陆账号</h2>
                <el-form :model="user">
                <input type="text" class="form_input" v-model="name" placeholder="请输入用户名">
                <input type="text" class="form_input" v-model="password" placeholder="请输入密码">
              </el-form>

                 <!--验证码-->
  <div class="login-page">
    <el-form label-width="160px" class="custom-form">
      <el-form-item label="验证码">
        <el-input placeholder="请输入验证码" v-model="sidentifyMode" clearable></el-input>
      </el-form-item> 
      
      <div class="code" @click="refreshCode">
        <Sidentify :identifyCode="identifyCode"></Sidentify>
      </div>
    </el-form>


</div>
                <a class="form_link">忘记密码？</a>
                <button class="button1 button" @click="login()">登陆</button>
        </div>
        
        <div>
            <div class="switch switch_container " id="switch-c2">
            <div class="logo"><img src="../assets/LOGO.PNG" alt="1"></div>
                <h2 class="switch_title title2" style="letter-spacing: 0;">Hello Friend！</h2>
                <p class="switch_description description">去注册一个账号,打造健康之旅!</p>
                <router-link to="/register">
                  <button class="switch_button button">去注册</button>
                </router-link>
              </div>
        </div>
  </div>
        
    </div>
  
</template>

<script setup>     
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { ref, onMounted, onBeforeUnmount } from 'vue';
import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs';
import Sidentify from './Sidentify.vue';



//获取路由器
let $router = useRouter()
let sidentifyMode = ref('') //输入框验证码
let identifyCode = ref('') //图形验证码
let identifyCodes = ref('1234567890abcdefjhijklinopqrsduvwxyz') //验证码出现的数字和字母
 
//组件挂载
onMounted(() => {
  identifyCode.value = ''
  makeCode(identifyCodes.value, 4)
})
 
// 生成随机数
const randomNum = (min, max) => {
  max = max + 1
  return Math.floor(Math.random() * (max - min) + min)
}
// 随机生成验证码字符串
const makeCode = (o, l) => {
  for (let i = 0; i < l; i++) {
    identifyCode.value += o[randomNum(0, o.length)]
  }
}
// 更新验证码
const refreshCode = () => {
  identifyCode.value = ''
  makeCode(identifyCodes.value, 4)
}
//登录
const login = () => {
  //验证验证码不为空
  if (!sidentifyMode.value) {
    ElMessage({ type: 'error', message: '验证码不能为空！' })
    return
  }
  //验证码
  if (sidentifyMode.value != identifyCode.value) {
    ElMessage({ type: 'error', message: '验证码错误' })
    refreshCode()
    return
  } else {
    ElMessage({ type: 'success', message: '登录成功' })
    $router.push('/home')
  } 

  //用户
  
}

</script>

<style lang="scss" scoped>

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* 防止滚动条 */
}


.app {
    background-color: #a3d4e4; /* 你想要的背景颜色 */
    margin: 0;
    padding: 0;
    height: 98vh; /* 使容器高度占满整个视口 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    overflow: hidden;
  }
  .shell {
            position: relative;
            width: 800px;
            min-width: 800px;
            min-height: 500px;
            height: 500px;
            padding: 20px;
            background-color:#ebf3ed;
            box-shadow: 10px 10px 20px #83b3c5;
            border-radius: 12px;
            overflow: hidden;
        }


        .form {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }


    .form_input{
    position: relative;
    left: 72px;
    width: 350px;
    height: 38px;
    margin: 10px 0;
    padding-left:25px;
    font-size: 13px;
    border-radius: 10px;
    letter-spacing: 0.15px;
    border: none;
    outline: none;
    background-color:rgb(251, 254, 251);
    transform: 0.25s ease;
    box-shadow: inset 2px 2px 4px rgb(194, 200, 195);
    margin: 5%;
    margin-top: 0px;
}

.form_input：focus{
    box-shadow: inset 4px 4px 4px #707553;
}

.button1{
  cursor: pointer;
    top: 45px;
    left: 140px;
    position: relative;
    margin: 0 auto;
    box-shadow: 2px 2px 8px #7f8941; 
}

.button1:hover,
.submit:hover{
    box-shadow: 6px 6px 10px #a7ae84;
    transform: scale(0.985);
    transition: 0.25s;
}

.button1:active,
.button1:focus{
    box-shadow: 2px 2px 6px #7f8941;
    transform: scale(0.97);
    transition: 0.25s;
}

.button{
    font-size: 15px;
    color: #303414;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 6px;
    background-color: #d0dd75;
    width: 160px;
    height: 50px;
    border-radius: 30px;
    border: none;
    outline: none;
    cursor: pointer;
}


        .form_span {
            margin-top: 30px;
            margin-bottom: 12px;
        }

        .form_link {
            position: relative;
            left:106px;
            top: -18px;
            color: #5b6129;
            font-size: 13px;
            margin-top: 25px;
            border-bottom: 1px solid #a0a5a8;
            line-height: 2;
            cursor: pointer;
        }

        .title1 {
          position: relative;
          font-size: 46px;
          font-weight: 700;
          line-height: 3;
          color: #6e7634;
          letter-spacing: 4px;
          left:193px; /* 将文本水平居中 */
          margin-top: 0px; 
          margin: 0%;
        }

        .description {
            font-size: 14px;
            letter-spacing: 0.25px;
            text-align: center;
            line-height: 1.6;
        }

        //这是右边的框框
        .b-container {
          z-index: 1;
          position: absolute;
          right: 0;
          top: 20px;
          width: 60%; /* 根据需要调整宽度 */
          height: 550px;
          padding: 25px;
          background-color:#ebf3ed;
          transition: 1.25s;
        }

        .switch{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px;
    height: 508px;
    padding: 50px;
    z-index: 200;
    transition: 1.25s;
    overflow: hidden;
    box-shadow: 8px 8px 20px #bfcccf92;
    backdrop-filter: blur(10px);
    background-color:rgba(255, 255, 255, 0.703);
}


        
        //这是左边的注册框框
        .switch_container {
          z-index: 2;
          border-radius: 16px;
          display: flex;
          justify-content: flex-start; /* 将内容对齐到顶部 */
          align-items: flex-start; /* 将内容对齐到顶部 */
          flex-direction: column;
          position: absolute;
          width: 250px;
          padding: 20px 55px; /* 减少顶部的内边距 */
          transition: 1.25s;
        }

       .logo{
        width: 240px; /* 设置合适的宽度 */
        height: 240px; /* 设置合适的高度 */
        margin-top: -50px; /* 距离顶端0px */
        text-align: center; 
        align-items: center;
        margin: 0 auto; /* 居中 */
}

       .logo img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
}

.switch_title{
  position: relative;
    color: #3b474a;
    margin: 0;
    top: -20px; /* 向上移动 */
    left: -20px; /* 向左移动 */
    font-size: 47px;
}

.switch_description{
    position: relative;
    top:-30px;
    left: -17px;
    font-size: 15px;
    color: #1f453b;
}

.switch_button {
    cursor: pointer;
    top: -20px;
    left: 43px;
    position: relative;
    margin: 0 auto;
    box-shadow: 2px 2px 8px #7f8941; /* 添加默认阴影 */
}

.switch_button:hover,
.submit:hover{
    box-shadow: 6px 6px 10px #a7ae84;
    transform: scale(0.985);
    transition: 0.25s;
}

.switch_button:active,
.switch_button:focus{
    box-shadow: 2px 2px 6px #7f8941;
    transform: scale(0.97);
    transition: 0.25s;
}

.custom-form {
  display: flex;
  align-items: center;
}

.custom-form .el-form-item {
  margin-right: 20px; /* 调整标签与输入框之间的距离 */
}

.custom-form .el-input {
  width: 150px; /* 设置输入框的宽度 */
}


  
</style>